// import React from 'react';
// import ReactDOM from 'react-dom';

import React from './lib/react';
import ReactDOM from './lib/react-dom';

/*
// 方法一: 基本写法
// render props

class MouseTracker extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      x: 0,
      y: 0
    }
  }

  handleMouseMove = (ev) => {
    this.setState({
      x: ev.clientX,
      y: ev.clientY,
    })
  }
  render() {
    return (
      <div onMouseMove={this.handleMouseMove} style={{width: '500px', height: '300px', border: '1px solid red'}}>
        移动鼠标
        <h3>x:{this.state.x},y:{this.state.y}</h3>
      </div>
    )
  }
}

ReactDOM.render(
  <MouseTracker />,
  document.getElementById('root')
);
*/


/*
// 方法二: children 写法
// render props

class MouseTracker extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      x: 0,
      y: 0
    }
  }

  handleMouseMove = (ev) => {
    this.setState({
      x: ev.clientX,
      y: ev.clientY,
    })
  }
  render() {
    return (
      <div onMouseMove={this.handleMouseMove} style={{width: '500px', height: '300px', border: '1px solid red'}}>
        {this.props.children(this.state)}
      </div>
    )
  }
}

ReactDOM.render(
  <MouseTracker>
    {
      (props) => (
        <div>
          移动鼠标
          <h3>x:{props.x},y:{props.y}</h3>
        </div>
      )
    }
  </MouseTracker>,
  document.getElementById('root')
);
*/

/*
// 方法三: 组件属性 props 写法
// render props

class MouseTracker extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      x: 0,
      y: 0
    }
  }

  handleMouseMove = (ev) => {
    this.setState({
      x: ev.clientX,
      y: ev.clientY,
    })
  }
  render() {
    return (
      <div onMouseMove={this.handleMouseMove} style={{width: '500px', height: '300px', border: '1px solid red'}}>
        {this.props.render(this.state)}
      </div>
    )
  }
}

ReactDOM.render(
  <MouseTracker render={(props) => (
    <div>
      移动鼠标
      <h3>x:{props.x},y:{props.y}</h3>
    </div>
  )} />,
  document.getElementById('root')
);
*/


// 方法四: 高阶组件写法
// render props
function widthMouseTracker(OldComponent) {
  return class extends React.Component {
    constructor(props) {
      super(props);
      this.state = {
        x: 0,
        y: 0
      }
    }
  
    handleMouseMove = (ev) => {
      this.setState({
        x: ev.clientX,
        y: ev.clientY,
      })
    }

    render() {
      return (
        <div onMouseMove={this.handleMouseMove} style={{width: '500px', height: '300px', border: '1px solid red'}}>
          <OldComponent {...this.state}/>
        </div>
      )
    }
  }
}

class MouseContent  extends React.Component {
  
  render () {
    return (<div>
      移动鼠标
      <h3>x:{this.props.x},y:{this.props.y}</h3>
    </div>)
  }
}

const MouseTracker = widthMouseTracker(MouseContent);

ReactDOM.render(
  <MouseTracker />,
  document.getElementById('root')
);

// 注意如果要使用老的把 jsx 编译成 React.createElement(), 必须在启动项中设置 cross-env DISABLE_NEW_JSX_TRANSFORM=true
// 如： "start": "cross-env DISABLE_NEW_JSX_TRANSFORM=true react-scripts start",